<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 第一种方式:<base> 标签为页面上的所有链接规定默认地址或默认目标 -->
<!--    <base th:href="@{/}">-->
    <!-- 上面定义了base路径标签,那么这里的css路径就可以直接写css路径,Springboot中,
    static文件夹默认就是静态资源文件夹,所以这里static/css/mycss.css可以不写static/了 -->
<!--    <link href="css/mycss.css" rel="stylesheet">-->

    <!-- 如果不使用base,那么这种方式也是可以的,@{/你的文件路径},缺陷就是每次引用都必须带上th:src="@{/}"这个才能正确引用,具体用什么方式,看你们自己 -->
<!--    <script th:src="@{/js/myjs.js}"></script>-->

<!--    <link   th:href="@{/Images/favicon.ico}" rel="shortcut icon" type="image/x-icon" />-->
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/bootstrap.css}" />
    <link type="text/css}" rel="stylesheet" th:href="@{/inspinia/font-awesome/css/font-awesome.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/plugins/toastr/toastr.min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/js/plugins/gritter/jquery.gritter.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/plugins/steps/jquery.steps.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/plugins/iCheck/custom.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/animate.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/plugins/summernote/summernote.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/plugins/summernote/summernote-bs3.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/style.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/plugins/dataTables/datatables.min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/plugins/dataTables/datatables.bootstrap.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/plugins/datapicker/datepicker3.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/plugins/blueimp/css/blueimp-gallery.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/inspinia/css/plugins/select2/select2.min.css}" />
    <link type="text/css" rel="stylesheet"
          th:href="@{/inspinia/css/plugins/bootstrap-dialog/bootstrap-dialog.min.css}" />


    <script type="text/javascript" th:src="@{/inspinia/js/jquery.min.js}" ></script>
    <script type="text/javascript" th:src="@{/inspinia/js/jquery-3.1.1.min.js}" ></script>
    <script type="text/javascript" th:src="@{/inspinia/js/bootstrap.js}" ></script>
    <script type="text/javascript" th:src="@{/inspinia/js/inspinia.js}" ></script>
    <script type="text/javascript" th:src="@{/inspinia/js/plugins/metisMenu/jquery.metisMenu.js}" ></script>
    <script type="text/javascript" th:src="@{/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js}" ></script>

    <script type="text/javascript" th:src="@{/inspinia/js/bootstrapValidator.min.js}" ></script>
    <script type="text/javascript" th:src="@{/inspinia/js/plugins/bootbox/bootbox.min.js}" ></script>
    <script type="text/javascript" th:src="@{/inspinia/js/plugins/dataTables/datatables.min.js}" ></script>
    <script type="text/javascript" th:src="@{/inspinia/js/plugins/dataTables/datatables.bootstrap.js}" ></script>
    <script type="text/javascript" th:src="@{/inspinia/js/plugins/steps/jquery.steps.min.js}" ></script>
    <script type="text/javascript" th:src="@{/inspinia/js/jquery-ui-jqLoding.js}" ></script>

    <script type="text/javascript" th:src="@{/inspinia/js/plugins/typehead/bootstrap3-typeahead.min.js}" ></script>

    <script type="text/javascript" th:src="@{/inspinia/js/plugins/pace/pace.min.js}" ></script>
    <!-- iCheck -->
    <script type="text/javascript" th:src="@{/inspinia/js/plugins/iCheck/icheck.min.js}" ></script>
    <!-- Date range picker -->
    <script th:src="@{/inspinia/js/plugins/datapicker/bootstrap-datepicker.js}" ></script>
    <script type="text/javascript" th:src="@{/inspinia/js/plugins/blueimp/jquery.blueimp-gallery.min.js}" ></script>
    <script type="text/javascript" th:src="@{/inspinia/js/plugins/summernote/dist/ajaxfileupload.js}" ></script>
    <!-- Select2 -->
    <script type="text/javascript" th:src="@{/inspinia/js/plugins/select2/select2.full.min.js}" ></script>

    <!-- SUMMERNOTE -->
    <script type="text/javascript" th:src="@{/inspinia/js/plugins/summernote/summernote.min.js}" ></script>


    <!--bootstrap-dialog start-->

    <script type="text/javascript" th:src="@{/inspinia/js/plugins/bootstrap-dialog/bootstrap-dialog.min.js}" ></script>

    <!--bootstrap-dialog end-->

    <!-- 该通用脚本放在最后 -->
    <script type="text/javascript" th:src="@{/inspinia/js/Common.js}" ></script>

    <style>
        .navbar
        {
            min-height: 28px;
        }

        .navbar-top-links li a
        {
            padding: 5px 10px;
            min-height: 20px;
        }
    </style>

</head>
<body>
<basePath th:value="${#httpServletRequest.getContextPath()}" id="basePath"></basePath>
<div id="wrapper">
<!--    菜单-->
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu-seller">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear"><span class="block m-t-xs"><strong
                                        class="font-bold">菜单</strong>
                                </span></span></a>
                    </div>
                    <div class="logo-element">
                    </div>
                </li>

                <li class="active">
                    <a class="activebg"><i class="fa fa-th-large"></i><span class="nav-label">管理</span>
                        <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li id="menufilesearch"><a th:href="${#httpServletRequest.getContextPath()}+'/user/user_list'">用户管理 </a></li>

                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <input type="hidden" id="hiddenId" value="" />
    <div id="page-wrapper" class="gray-bg dashbard-1">
<!--        头部菜单-->
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i></a>

                </div>
                <ul class="nav navbar-top-links navbar-right">

                    <li class="dropdown">
                        <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                            <span id="modelCode" text="suizq"></span>
                        </a>
                    </li>
                    <li><a href="#" id="ligerenzhognxin" style="font-family: 'Microsoft YaHei'">
                        <i class="fa fa-address-card-o" aria-hidden="true"></i>个人中心
                    </a></li>
                    <li>
                        <a th:href="${#httpServletRequest.getContextPath()}+'/user/exit'" style="font-family: 'Microsoft YaHei'">
                            <i class="fa fa-sign-out"></i>退出
                        </a>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="row"  layout:fragment="content">


        </div>
        <div class="row">
            <div id="footer">
                <p>&copy; @2020 - 我的SpringBoot应用程序</p>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-sm" id="editModal"
     role="dialog" aria-labelledby="roleModalLabel"
     aria-hidden="true" style="display: none;" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-sm" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header modal-title-bgcolor">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title modal-title-color">
                    <i class="glyphicon glyphicon-th-large"></i>用户管理
                </h4>
            </div>
            <div role="form" name="FileDataForm" id="FileDataForm" method="post">
                <div class="modal-body">


                    <div class="row" style="margin-top: 10px">
                        <div class="col-sm-12">

                            <div class="form-group">
                                <div class="col-sm-3">
                                    <label>姓名：</label>
                                </div>
                                <div class="col-sm-9" style="margin-bottom: 10px">
                                    <input type="text" id="name" name="name" class="form-control required"
                                           aria-required="true"
                                           maxlength="20" placeholder="姓名" data-toggle="tooltip"
                                           title="姓名不能为空"/>
<!--                                   <div class="hr-line-dashed"></div>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-3">
                                    <label>密码：</label>
                                </div>
                                <div class="col-sm-9" style="margin-bottom: 10px">
                                    <input type="password" id="password" name="password" class="form-control required"
                                           aria-required="true"
                                           maxlength="50" placeholder="密码" data-toggle="tooltip"
                                           title="密码不能为空"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-3">
                                    <label>邮箱：</label>
                                </div>
                                <div class="col-sm-9" style="margin-bottom: 10px">
                                    <input type="email" id="email" name="email" class="form-control required"
                                           aria-required="true"
                                           maxlength="50" placeholder="邮箱" data-toggle="tooltip"
                                           title="邮箱不能为空"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-3">
                                    <label>电话：</label>
                                </div>
                                <div class="col-sm-9" style="margin-bottom: 10px">
                                    <input type="tel" id="phonenumber" name="phonenumber" class="form-control required"
                                           aria-required="true"
                                           maxlength="11" placeholder="电话" data-toggle="tooltip"
                                           title="电话不能为空"/>
                                </div>
                            </div>
                            <form method="post" action="#">
                                <div class="form-group">
                                    <div class="col-sm-3">
                                        <label>照片：</label>
                                    </div>
                                    <div class="col-sm-3">
                                        <a th:href="${#httpServletRequest.getContextPath()}+'/upload/default.png'"  title=""
                                           id="lnkImg"
                                           data-gallery="">
                                            <img id="imgID" class="img-responsive"
                                                 style="max-height: 153px;border: 5px solid #e5e6e7;"
                                                 th:src="${#httpServletRequest.getContextPath()}+'/upload/default.png'"/>
                                        </a>
                                        <input type="file" name="files" id="fileImg" accept="image/*"
                                               value="上传" style="width: 270px; display: none;"
                                               attrbtnupload='attrbtnupload'/>
                                        <input type="hidden" value=""
                                               id="imgUrl" name="imgUrl"/>
                                    </div>
                                    <div class="col-sm-1">
                                        <button type="button" class="btn btn-primary btn-rounded"
                                                onclick="$('#fileImg').click();" attrbtnupload='attrbtnupload'>
                                            上传
                                        </button>
                                    </div>
                                </div>

                            </form>


                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-w-m btn-default pull-left"
                            data-dismiss="modal">
                        取消
                    </button>
                    <button type="button" id="btnSave"
                            class="btn btn-primary" value="">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    $(document).ready(function () {
        $("#ligerenzhognxin").click(function () {
            $.ajax({
                // 提交数据的类型 POST GET
                type: "get",
                // 提交的网址
                url: $('#basePath').attr("value")+"/user/getuseridnow",
                // 提交的数据
                data: {},
                // 返回数据的格式
                datatype: "json",
                // 在请求之前调用的函数
                // beforeSend: xmlBeforeSend,
                // 成功返回之后调用的函数
                success: function (data) {
                    //$.fn.jqLoading("destroy");

                    if (data != null) {
                        datEdit(data);
                    } else {

                    }
                }//,
                // 调用出错执行的函数
                //error: xmlError
            });
        });
    });

    function datEdit(id) {

        clearAll();

        $("#hiddenId").val(id);

        $.ajax({
            // 提交数据的类型 POST GET
            type: "POST",
            // 提交的网址
            url: $('#basePath').attr("value")+"/user/getUserById",
            // 提交的数据
            data: { id: Number($("#hiddenId").val()) },
            // 返回数据的格式
            datatype: "json",
            // 在请求之前调用的函数
            beforeSend: xmlBeforeSend,
            // 成功返回之后调用的函数
            success: function (data) {

                $.fn.jqLoading("destroy");

                if (data != null) {
                    $("#name").val(data.name);
                    $("#password").val(data.password);
                    $("#email").val(data.email);
                    $("#phonenumber").val(data.phonenumber);
                    $("#imgID").attr("src", $('#basePath').attr("value")+data.userimg);
                    $("#lnkImg").attr("href", $('#basePath').attr("value")+data.userimg);
                    $("#imgUrl").val($('#basePath').attr("value")+data.userimg);
                    $("#editModal").modal('show');
                }


                //alert(data);
            },
            // 调用出错执行的函数
            error: xmlError
        });

    }
</script>
</body>
</html>

